<template>
	<kb-layout>
		<!-- 设置选择门票参数后，准备下单页面 -->
		<view class="good-info u-margin-25 u-padding-25">
			<view class="title-info u-flex u-flex-column u-flex-between ">
				<view class="title u-flex u-flex-between">

					<view class="u-line-2">
						<text class="font-size16 font-weight">{{ ticket.title }}</text>
					</view>
					<view class="price text-right">

						<view class=" color-red  font-weight">
							<text class="font-size14">¥</text>
							<text class="font-size16">{{ee.shopCart.price}}</text>
							<text class="font-size14"> /张</text>
						</view>

					</view>

				</view>


				<view class="ticket-date u-margin-top-15 u-flex u-flex-between">
					<view class="u-flex-grow">
						<text class="font-size14">游玩时间：{{ee.shopCart.day_select}}</text>
					</view>

					<view>
						<text class="font-size14">×{{ee.shopCart.buy_num}}张</text>
					</view>

				</view>


				<view class="title-btn u-flex u-flex-between u-margin-top-25">
					<view class="buy-tips">
						<text v-for="(text,i) in ticket.tag" :key="i" class="tip-tag"> {{text}} </text>
						 
					</view>
					<view class="buy-go" @click="()=>showDetails=!showDetails">
						<text class="font-size12 color-gray">预定须知></text>
					</view>
				</view>

			</view>

			<view class="line-border u-margin-top-60 u-margin-bottom-30"> </view>

			<!-- 出行人信息 -->
			<view class="people ">
				<view class="title u-margin-bottom-20">
					<text class="font-size14 font-weight">出行人信息</text>
				</view>
				<view class="u-flex u-flex-content-between align-center">
					<view class="font-size14 u-flex-grow">
						<text>需要填写</text>
						<text class="color-red"> {{need_people}}</text>
						<text>位出行人</text>
						<text>（已添加 </text>
						<text class="color-red"> {{select_people}} </text>
						<text>位）</text>
					</view>

					<view class="add">
						<u-button @click="()=>openSelectPeople =!openSelectPeople" text="添加" size="small"
							:disabled="select_people >=need_people" type="primary"></u-button>
						<selectPeople v-model:open="openSelectPeople" 
						@select="onPeopleSelect"
						:isRefresh="isRefresh"
							:nums="{need_people,select_people}"></selectPeople>
					</view>
				</view>

				<view class="u-margin-top-15 ">
					<up-alert type="error" :description="'证件为验票凭证\n输入的证件信息需与出游时所持证件一致'"></up-alert>

				</view>

				<view class="peoples">

					<view class="" v-for="(item,k) in pepoleList" :key="k">
						<view class="one-item u-flex u-flex-between align-center u-margin-30">
							<view class="u-margin-right-40">
								<u-icon name="minus-square-fill"  @click="removePeople(item.id)"
								 color="#f56c6c" size="18"></u-icon>
							</view>
							<view class="center u-flex-grow font-size14">
								<view class="name">
									<text class="font-weight">{{item.name}}</text>
								</view>
								<view class="name">
									<text class="">手机号</text>
									<text class="color-gray u-margin-left-10">{{item.mobile}}</text>
								</view>
								<!-- <view class="card">
									<text>身份证</text>
									<text class="color-gray u-margin-left-10"> {{item.identity}}</text>
								</view> -->
							</view>
							<view class="check">
								<navigator :url="'/pages/mall/people?id='+item.id">
									<u-icon name="edit-pen" color="#3C9CFF" size="18"></u-icon>
								</navigator>
							</view>
						</view>
						<view class="line-border"> </view>
					</view>

				</view>

				<view class="remark u-margin-top-15">
					<view class="title u-margin-bottom-20">
						<text class="font-size14 font-weight">备注</text>
					</view>
					<view>
						<up-input placeholder="选填" border="surround" v-model="remark"></up-input>
					</view>
				</view>

			</view>
		</view>
		<!-- 预定须知的底部弹窗 -->
		<popupTicketInfo v-model:showDetails="showDetails" :ticket="ticket"></popupTicketInfo>

		<!-- 底部下单按钮 -->
		<view class="buy-bar">
			<view class="solt">
				<order-bar :ticket="ticket" :totalPrice="totalPrice" @clickBuyBtn="orderSubmit"> </order-bar>
			</view>
		</view>
	</kb-layout>
</template>

<script>
	import {
		getTicketDetail,
		getPeopleList,
		createOrder
	} from "@/common/api.js";
	import {
		wxpayHelper
	} from "../../common/tools/wxpay";
	import {
		Toast
	} from "../../common/tools/uniApi";
	import popupTicketInfo from "./componets/popup-ticket-info.vue";
	import orderBar from "./componets/order-bar.vue";
	import selectPeople from "./componets/select-people.vue";

	export default {
		components: {
			popupTicketInfo,
			orderBar,
			selectPeople
		},
		data() {
			return {
				good_id: 0,
				ticket: {},
				remark: undefined,
				showDetails: false,
				price: 0,
				buy_num: 1,
				day_select: "",
				ticket_id: undefined,
				openSelectPeople: false, //打开选择出行人 
				pepoleList: [],
				isSubmitting: false,
			}
		},
		computed: {
			//需要出行人信息个数
			need_people: function() {
				return this.ticket.need_people ?? 1;
			},
			totalPrice: function() {
				let price =  this.buy_num * this.price - this.ticket.discount;
				return price > 0  ? price :0;
			},
			//已经选择出行人个数
			select_people: function() {
				return this.pepoleList.length;
			},
			isRefresh: function() {
				return this.ee.backRefresh;
			},
			shopCart: function() {
				return this.ee.shopCart;
			}
		},
		watch: {
			isRefresh: function(n, o) {
				console.log('更新了呀',n,o)
				if (n) {
					// this.ee.setBackRefresh(false);
					this.fetchPeople();
				}
			}
		},
		methods: {
			onPeopleSelect(people) {
				let has = this.pepoleList.find((item) => item.id == people.id)
				if (!has)
					this.pepoleList.push(people);
			},
			removePeople(id) {
				let arr = this.pepoleList.filter((item) => {
					return item.id != id;
				})
				this.pepoleList.splice(0);
				this.pepoleList.push(...arr)
			},
			fetchPeople() {
				if (!this.ticket_id) return;
				let ids = this.pepoleList.map(item => item.id);
				const that = this;
				console.log('获取选中的人', ids)
				if(ids.length){
					getPeopleList(ids).then(ret => {
						that.pepoleList.splice(0);
						that.pepoleList = ret;
					})
				}
				
			},
			//提交订单
			orderSubmit() {			
				//
				if (this.need_people > this.select_people) {
					Toast('请添加出行人');
					return false;
				}
				if (this.isSubmitting) return;
					this.isSubmitting = true; //防止重复点击按钮
				
				let ids = this.pepoleList.map(item => item.id);
				let formData = {
					total_price: this.totalPrice,
					price: this.price,
					buy_num: this.buy_num,
					day_select: this.day_select,
					ticket_id: this.ticket_id,
					people_ids: ids.join(","),
					remark: this.remark ?? '',
					good_id: this.good_id,
				}
				
				const that = this;
				createOrder(formData).then((ret) => {

					this.ee.setShopCart({});
					this.ticket_id = 0;
					let order_id = ret.id;
					//发起支付
				    wxpayHelper(formData.total_price, {
						order_no: ret.order_no
					}).then((ret) => {
						Toast('支付成功');
						setTimeout(() => { uni.navigateTo({
							url: "/pages/mall/detail?id="+order_id
						})}, 2000);

					}, (error) => { //wxpayHelper 的reject
						Toast(error.message)
						setTimeout(() => that.ee.switchTab('order'), 2000);
					})
					//createOrder订单失败
				}, (fail) => {
					 //这里不需要toast 信息在ajax拦截器里面有处理199返回
					//Toast('创建订单失败')

				})

			}
		},
		onShow() {
			if (!this.ticket_id) {
				this.ee.switchTab('order')
			}
		},
		onLoad(options) {
			const {
				price,
				ticket_id,
				buy_num,
				day_select,
				good_id
			} = this.ee.shopCart;

			this.price = price;
			this.buy_num = buy_num;
			this.day_select = day_select;
			this.ticket_id = ticket_id;
			this.good_id = good_id;

			getTicketDetail(ticket_id).then((ret) => this.ticket = ret);
		}
	}
</script>

<style lang="scss">
	.good-info {
		background-color: #ffffff;
		border-radius: 10px;
	}

	.buy-tips .tip-tag {
		background-color: #DBEBFF;
		color: #3388E8;
		font-size: 12px;
		margin-right: 5px;
		padding: 3px 5px;
		border-radius: 4px;
		font-weight: 500;
	}

	.buy-bar {
		height: 90px;

		.solt {
			position: fixed;
			left: 0;
			bottom: 0px;
			width: 100%;
		}
	}
</style>